<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="keywords" content="">
	    <meta name="description" content="">
		<title>车辆信息反馈</title>
	    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
	    <script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/layui/layui.js"></script>
	    <style type="text/css">
			.form-control-date {
				width: 100%;
				height: 34px;
				padding: 6px 12px;
				font-size: 14px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			
			input[type="date"]:before{
				content:attr(placeholder);
			}
			
			input[type="date"].full:before{
				content:""!important;
			}
	    </style>
	</head>
	<body>
	<div>
		<div class="col-xs-12 col-sm-8 col-md-12 col-lg-12" style="padding-top: 20px;">			
<!-- 				<form action="/IEMS" method="post" id="myform" onsubmit="return false;"> -->
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>手机号：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请填写您的手机号" class="form-control"
								name="userPhone" id="userPhone">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>姓名：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请输入您的真实姓名" class="form-control"
								name="userName" id="userName">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>车牌号：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请输入您的车牌号" class="form-control"
								name="carNo" id="carNo">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>底盘号：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请填写您车辆的底盘号" class="form-control"
								name="chassisNo" id="chassisNo">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>发动机号：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请填写您车辆的发动机号" class="form-control"
								name="ESN" id="ESN">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label" >车辆登记日期：</label>
						<div class="col-sm-8 input-add-page-width">
							<input type="date" class="form-control-date" name="registDate" id="registDate" placeholder="请选择车辆的登记日期" style="height: 34px; overflow: hidden;">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>车辆所有人姓名：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请填写车辆所有人的真实姓名" class="form-control"
								name="ownerName" id="ownerName">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>联系方式：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请填写车辆所有人联系方式" class="form-control"
								name="ownerPhone" id="ownerPhone">
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label"><span style="color: red;">*</span>目前运营里程(km)：</label>
						<div class="col-sm-8">
							<input type="text" placeholder="请填写您车辆当前运营里程" class="form-control"
								name="totalMiles" id="totalMiles">
						</div>
					</div>
					
					<div class="form-group" style="margin-bottom: 5px;margin-top: 5px;">
						<label for="inputEmail3" class="col-sm-3 control-label">请拍照车牌号或行驶证照片：</label>
						<div class="col-sm-8">
							<input type="file" accept="image/*" placeholder="请拍照车牌号或行驶证照片" class="form-control"
								name="upload" id="upload" style = "display: none;">
							<img id="imgViewer" src="img/academy_defaultcoursephoto_icon@3x.png" width="150px;" height="150px;" alt="暂无图片" />
						</div>
					</div>
					
					<div style="text-align: center; padding: 10px;">
						<button type="button" class="btn btn-danger btn-sm btn_width_my" id="submitBtn" style="width: 40%;">提交</button>
					</div>
<!-- 				</form> -->
			</div>
		</div>
	</body>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$(function () {
			
			$("#registDate").css("width", $("#ownerPhone").css("width"));
			
// 			$("#imgViewer").css("width", $("#ownerPhone").css("width"));
// 			$("#imgViewer").css("height", $("#ownerPhone").css("width"));
			
			
			$("#upload").on("change", function() {
				var reads = new FileReader();
				f = $('#upload')[0].files[0];
				reads.readAsDataURL(f);
				reads.onload = function(e) {
					$("#imgViewer").attr("src",  this.result);
				};
			});
			
			$("#imgViewer").on("click", function() {
				$("#upload").click();
			});
			
			
			$("#registDate").on("input", function() {
				if($(this).val().length > 0) {
					$(this).addClass("full");
				} else {
					$(this).removeClass("full");
				}
			})
			
			$("#submitBtn").click(function(){
				
				var userPhone = $("#userPhone").val().trim();
				
				if(userPhone.length == 0) {
					layer.msg("请填写您的手机号！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(userPhone)) || !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(userPhone)){
					layer.msg("手机号格式有误，请重填！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var userName = $("#userName").val().trim();
				
				if(userName.length == 0) {
					layer.msg("请输入您的真实姓名！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(userName.length > 20) {
					layer.msg("姓名长度不能超过20，请重新输入！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var carNo = $("#carNo").val().trim();
				
				if(carNo.length == 0) {
					layer.msg("请输入您的车牌号！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(carNo.length > 30) {
					layer.msg("车牌号长度不能超过30，请重新输入！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var chassisNo = $("#chassisNo").val().trim();
				
				if(chassisNo.length == 0) {
					layer.msg("请填写您车辆的底盘号！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(chassisNo.length != 17) {
					layer.msg("底盘号长度必须是17位，请重新输入！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var ESN = $("#ESN").val().trim();
				
				if(ESN.length == 0) {
					layer.msg("请填写您车辆的发动机号！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(ESN.length != 8) {
					layer.msg("发动机号长度必须是8位，请重新输入！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var ownerName = $("#ownerName").val().trim();
				
				if(ownerName.length == 0) {
					layer.msg("请填写车辆所有人的真实姓名！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(ownerName.length > 20) {
					layer.msg("车辆所有人姓名长度不能超过20，请重新输入！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var ownerPhone = $("#ownerPhone").val().trim();
				
				if(ownerPhone.length == 0) {
					layer.msg("请填写车辆所有人的联系方式！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(ownerPhone.length > 20) {
					layer.msg("车辆所有人的联系方式长度不能超过20，请重新输入！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var totalMiles = $("#totalMiles").val().trim();
				
				if(totalMiles.length == 0) {
					layer.msg("请填写您车辆当前运营里程！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				if(!(/^\d+\.{0,1}\d{0,2}$/.test(totalMiles))) {
					layer.msg("当前运营里程有误，请重填！", {
						icon: 2,
						shade: [0.8, '#393D49'] // 透明度  颜色
					});
					return;
				}
				
				var formData = new FormData();
				formData.append("upload",$('#upload')[0].files[0]);
				formData.append("userName",userName);
				formData.append("userPhone",userPhone);
				formData.append("carNo",carNo);
				formData.append("chassisNo",chassisNo);
				formData.append("ESN",ESN);
				formData.append("registDate",$("#registDate").val());
				formData.append("ownerName",ownerName);
				formData.append("ownerPhone",ownerPhone);
				formData.append("totalMiles",totalMiles);
				
				var index = layer.load();
				$.ajax({
					type: "POST",
		            url:"/kangDaoApi/activity.aspx",
		            dataType:'text',
		            data:formData,
		            processData : false,
		            contentType : false,
					success:function(data){
						layer.close(index);
	                  	document.write(data);
					}
				});
				
			});
			
		});
	</script>
</html>